import React, { useState } from 'react'
import { Sticky, NavBar, Toast, Stepper, Button, Input, Form,hooks } from 'react-vant'
import { ArrowLeft, Arrow } from '@react-vant/icons';
import '../../css/jly/InsertUser.css'
import { Price } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function InsertUser() {
    const navigate = useNavigate()
    const [form] = Form.useForm()

    const onFinish = values => {
        console.log(values)
    }

    const [state, updateState] = hooks.useSetState({
        name:'',
        phone: '',
        idcard: '',
      })


    //添加
    let addPerson = async () => {
        let {data:{code}} = await axios.post('http://127.0.0.1:3000/addPerson',{data:{...state}})
        if(code === 200){
            navigate(-1)
        }
        console.log(state);
    }
    return (
        <div className='insertUser'>
            <Sticky>
                <NavBar
                    title="新建观演人信息"
                    leftText={<ArrowLeft />}
                    onClickLeft={() =>  navigate(-1)}
                />
            </Sticky>

            <Form
                form={form}
                onFinish={onFinish}
            // footer={
            //     <div style={{ margin: '16px 16px 0' }}>
            //         <Button round nativeType='submit' type='primary' block>
            //             提交
            //         </Button>
            //     </div>
            // }
            >
                <Form.Item
                    tooltip={{
                        message:
                            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
                    }}
                    rules={[{ required: true, message: '请填写观演人姓名' }]}
                    name='username'
                    label='姓名'
                >
                    <Input
                        value={state.name}
                        onChange={name => updateState({ name })}
                        placeholder='请填写观演人姓名'
                        clearable
                    />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '请填写手机号' }]}
                    name='phone'
                    label='手机号'
                >
                    <Input
                        value={state.phone}
                        onChange={phone => updateState({ phone })}
                        placeholder='请填写手机号'
                        clearable
                    />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '请填写身份证号' }]}
                    name='idcard'
                    label='身份证'
                >
                    <Input
                        value={state.idcard}
                        onChange={idcard => updateState({ idcard })}
                        placeholder='请填写身份证号'
                        clearable
                    />
                </Form.Item>
            </Form>
            <Sticky position='bottom'>
                <div className='Ot_bottom'>

                    <div className='Ot_bottom_right'>
                        <Button type='danger' style={{ width: '300px', marginLeft: '30px' }} onClick={() => { addPerson() }}>确定</Button>
                    </div>
                </div>
            </Sticky>
        </div>
    )
}
